<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!--兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit"/>
    <title>主要引导页</title>
 <!-- CSS -->
 <link rel="stylesheet" href="./style.css"/>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!--图标-->
    <link rel="shortcut icon" type="image/icon" href="../images/joveImg/favicon.png"/>

    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!--去掉超链接-->
    <style>a{TEXT-DECORATION:none}</style>

</head>
<body>
     <!--头部-->
     <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
          <a href="#" class="navbar-brand">jlove</a> 
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navmenu">
          <span class="navbar-toggler-icon"></span>
        </button>
          <div class="collapse navbar-collapse" id="navmenu">
              <ul class="navbar-nav ms-auto">
                  <!-- margin start=margin left -->
                  <li class="nav-item"><div class="nav-link"><a class="text-light" href="register.html">注册</a><br></div></li>
                  <li class="nav-item"><div class="nav-link"><a class="text-light" href="login.html">登录</a><br></div></li>
                  <li class="nav-item"><div class="nav-link"><a class="text-light" href="myinfo.html">个人信息设置</a><br></div></li>
                  <li class="nav-item"><div class="nav-link"><a class="text-light" href="upload.html">头像设置</a><br></div>
                  </li>
              </ul>
          </div>
        </div>
      </nav>
<div>
    <!-- <h1>
        <a href="register.html">注册</a><br>
        <a href="login.html">登录</a><br>
        <a href="myinfo.html">个人信息设置</a><br>
        <a href="upload.html">头像设置</a><br>
    </h1> -->
    <section class="p-5 bg-dark text-light">
        <div class="container">
            <div
            id="search-user"  class="d-md-flex justify-content-between align-items-center"
            >                
                <div id="form-search" class="input-group news-input">
                    <input
                        id="key"
                        name="key"
                        type="text"
                        class="form-control"
                        placeholder="请输入查找条件，可查找用户名/姓名/职业等"
                    />
                    <button id="btn-search" class="btn btn-primary btn-lg">搜索一下</button>
                </div>
            </div>
        </div>
    </section>
    <!-- <div id="search-user">
        <form id="form-search">
            <input id="key" name="key" type="text" placeholder="请输入查找条件，可查找用户名/姓名/职业等">
            <input id="btn-search" type="button" value="搜索一下">
        </form>
    </div> -->
    <section class="p-5 bg-primary">
        <div class="container">
            <div id="recommend-list">
            <h2 class="text-center text-light">用户推荐</h2>
            <p class="lead text-center text-white mb-5">
                猜你喜欢
            </p>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="https://s1.ax1x.com/2022/12/13/z5adR1.png" alt="用户头像" style="border-radius: 50%"/>
                            <h3 class="card-title"><a href="info.html">用户名称</a><br></h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="https://s1.ax1x.com/2022/12/13/z5adR1.png" alt="用户头像" style="border-radius: 50%"/>
                            <h3 class="card-title"><a href="info.html">用户名称</a><br></h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="https://s1.ax1x.com/2022/12/13/z5adR1.png" alt="用户头像" style="border-radius: 50%"/>
                            <h3 class="card-title"><a href="info.html">用户名称</a><br></h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="https://s1.ax1x.com/2022/12/13/z5adR1.png" alt="用户头像" style="border-radius: 50%"/>
                            <h3 class="card-title"><a href="info.html">用户名称</a><br></h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </section>
    <section class="p-5">
        <div class="container">
            <h2 class="text-center">常见问题</h2>
            <div
                class="accordion accordion-flush"
                id="accordionFlushExample"
            >
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseOne"
                            aria-expanded="false"
                            aria-controls="flush-collapseOne"
                        >
                           <h5>关于我们</h5>
                        </button>
                    </h2>
                    <div
                        id="flush-collapseOne"
                        class="accordion-collapse collapse"
                        aria-labelledby="flush-headingOne"
                        data-bs-parent="#accordionFlushExample"
                    >
                        <div class="accordion-body">
                           一家专业的相亲网站
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingTwo">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseTwo"
                            aria-expanded="false"
                            aria-controls="flush-collapseTwo"
                        >
                            <h5>打造相亲网站的初衷</h5>
                        </button>
                    </h2>
                    <div
                        id="flush-collapseTwo"
                        class="accordion-collapse collapse"
                        aria-labelledby="flush-headingTwo"
                        data-bs-parent="#accordionFlushExample"
                    >
                        <div class="accordion-body">
                            因为需要完成javaee课程设计
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingThree">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseThree"
                            aria-expanded="false"
                            aria-controls="flush-collapseThree"
                        >
                            <h5>如何加入我们</h5>
                        </button>
                    </h2>
                    <div
                        id="flush-collapseThree"
                        class="accordion-collapse collapse"
                        aria-labelledby="flush-headingThree"
                        data-bs-parent="#accordionFlushExample"
                    >
                        <div class="accordion-body">
                           疯狂星期四v我们100
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id = "gotop">
        <img src="./images/gotop.png" alt="gotop">
    </div>
    <script>
        window.addEventListener("scroll",handle)
        function handle(){
           
            var oTop = document.body.scrollTop||document.documentElement.scrollTop
            if(oTop>=200){
                gotop.style.display = "block";
            }else{
                gotop.style.display = "none";
            }

            gotop.onclick = function(){
                window.scrollTo({
                    top:0,
                    behavior:"smooth"
                })
            }
        }
    </script>
    <section class="p-5">
        <div class="container">
            <h2 class="text-center mb-4">联系我们</h2>

            <ul class="list-group list-group-flush">
                <li class="list-group-item">电话:520520520</li>
                <li class="list-group-item">邮箱： @jlove.com</li>
                <li class="list-group-item">地址：南京市</li>
              </ul>
        </div>
    </section>  
    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">Copyright &copy; jlove</p>
        </div>
    </footer>
    <!-- <div id="recommend-list">
        <div>
            <div><a href="info.html">用户</a></div>
            <div>用户签名</div>
            <div><img src="https://s1.ax1x.com/2022/12/13/z5adR1.png" alt="用户头像" style="border-radius: 50%"/></div>
        </div>
    </div>
</div> -->
<script type="text/javascript">
    $(document).ready(function () {
        recommendUser();
    });

    function recommendUser() {
        $("#recommend-list").empty();
        $.ajax({
            url: "/users/recommend_user",
            type: "GET",
            dataType: "JSON",
            success: function (json) {
                let list = json.data;
                console.log("count=" + list.length);
                for (let i = 0; i < list.length; i++) {
                    console.log(list[i].title);
                    let html = '<div>'
                        + '<div><a href="info.html?uid=#{uid}">#{username}</a></div>'
                        + '<div>#{personal_profile}</div>'
                        + '<div><img src="#{avatar}" alt="用户头像" height="256px" width="256px" style="border-radius: 50%"/></div>'
                        + '</div>';

                    html = html.replace(/#{uid}/g, list[i].uid);
                    html = html.replace(/#{username}/g, list[i].username);
                    html = html.replace(/#{personal_profile}/g, list[i].personalProfile);
                    html = html.replace(/#{avatar}/g, list[i].avatar);

                    $("#recommend-list").append(html);
                }
            }
        });
    }
</script>
<script type="text/javascript">
    $("#btn-search").click(function () {
        $("#recommend-list").empty();
        $.ajax({
            url: "/users/search_user",
            type: "GET",
            data: $("#form-search").serialize(),
            dataType: "JSON",
            success: function (json) {
                if (json.state === 100) {
                    let list = json.data;
                    console.log("count=" + list.length);
                    for (let i = 0; i < list.length; ++i) {
                        console.log(list[i].title);
                        let html = '<div>'
                            + '<div><a href="info.html?uid=#{uid}">#{username}</a></div>'
                            + '<div>#{personal_profile}</div>'
                            + '<div><img src="#{avatar}" alt="用户头像" height="256px" width="256px" style="border-radius: 50%"/></div>'
                            + '</div>';

                        html = html.replace(/#{uid}/g, list[i].uid);
                        html = html.replace(/#{username}/g, list[i].username);
                        html = html.replace(/#{personal_profile}/g, list[i].personalProfile);
                        html = html.replace(/#{avatar}/g, list[i].avatar);

                        $("#recommend-list").append(html);
                    }
                } else {
                    alert("搜索失败！" + json.message);
                }
            },
            error: function (xhr) {
                alert("搜索失败，未知错误：" + xhr.status);
            }
        });
    });
</script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
</body>
</html>